Design System デザインシステム
スタイルガイド
Component コンポーネント codeライブラリ
正直、かなり大きい会社でないと必要ない
多くのサービスはすぐに死ぬ
あまり、特殊なデザインにしにくい
作る時間がかかるほど、捨てにくい
いい例
LINE
LINEのデザインシステム:一貫性を損なうことなくLINEのサービスの速度を上げる - LINE DEVELOPER DAY 2019
LINEはなぜデザインシステムを取り入れたのか? フロントエンドにおける価値と定義を解説 - ログミーTech
koromo
Bootstrapが元
Bootstrapのコミッターでもある
課題
Component コンポーネント code名が決まらない
問題
名前の競合
迷う
解決策
Component コンポーネント codeの役割を考えて選ぶ
メンバーと議論する
スタイルガイドをみんなでレビュー
自動Test テスト Testingできない
経験
デザインシステムの実装
途中参加あり
0からコツコツ作ってみたい
リンク
デザインシステムの資料を作る時に参考にしたリンクまとめ
Airbnbのデザインシステムの構築 - heru - Medium
大規模ECサイトを支えるデザインシステム - Speaker Deck
デザインシステムを0から作るまでのフローを現実的に設計していて良かった
「プロダクト間共通の React コンポーネントライブラリ」がどうなったか、という話 - SmartHR Tech Blog
Design Systems For Figma
dbanksdesign - The home of Danny Banks | dbanksdesign
Naming Tokens in Design Systems. Terms, Types, and Taxonomy to Describe… | by Nathan Curtis | EightShapes | Medium
naming 名付け 命名
Design good practices | Home
The Never-Ending Job of Selling Design Systems – A List Apart
導入、売り込み用
Building better products with a design token pipeline | by Lukas Oppermann | Feb, 2021 | UX Collective
design tokenという概念で情報設計する話
開発用にexportするファイルがあり、その繋ぎ重要
Frontend Talk 〜デザインシステム構築のリアルな裏側〜【hey|note|ANDPAD】
「デザインシステム」がよくわからないので、理解の仕方を変えてみる|usagimaru
あまりにも言葉の意味が混乱しがちであることを、criticalに分析して、言語化してくれている。
完全に鵜呑みにするのでなく、参考文献とか見ながら、自身の意見を作ると良い。
「デザインシステム」って何?新人WEBデザイナーがインターネットの海を泳いでみた|akane
デザイナー新人の方が、デザインシステムについて色々調べた記事
新人の方が書いているので、意見自身は半分で受け取りつつ、新人視点でどの情報がとっつきやすいかとか見るといい。
具体例
まとめサイト
alexpate/awesome-design-systems: 💅🏻 ⚒ A collection of awesome design systems
Adele – Design Systems and Pattern Libraries Repository
具体例
storybookjs/design-system: 🗃 Storybook Design System
kufu/smarthr-ui: React components for creating SmartHR applications.
Shopify/polaris-react: Shopify’s product component library
atlassian/atlaskit
pinterest/gestalt: A set of React UI components that supports Pinterest’s design language
Carbon Design System
uber/baseweb: A React Component library implementing the Base design language
Component Library by Adobe